<template>
  <view class="wrap">
    <u-button type="success" text="本机号码一键登录" icon="phone" shape="circle" @click="loginPhone"></u-button>
    <u-button
      type="success"
      text="帐号密码登录"
      icon="account-fill"
      shape="circle"
      iconColor="#fff"
      color="rgb(107, 191, 216)"
      @click="loginAccounts"
    ></u-button>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
    }
  },
  methods: {
    ...mapMutations(['setUserInfo', 'setToken', 'setRefreshToken']),
    loginPhone () {
      const this_ = this
      uni.preLogin({
        provider: 'univerify',
        success (res) {
          uni.login({
            provider: 'univerify',
            univerifyStyle: {
              "fullScreen": true,
              "backgroundColor": "#ffffff",
              "backgroundImage": "",
              "icon": {
                "path": "static/images/logo.png"
              },
              "phoneNum": {
                "color": "#202020"
              },
              "slogan": {
                "color": "#BBBBBB"
              },
              "authButton": {
                "normalColor": "#1fb683",
                "highlightColor": "#2861c5",
                "disabledColor": "#73aaf5",
                "textColor": "#ffffff",
                "title": "本机号码一键登录",
                "borderRadius": "24px"
              },
              "otherLoginButton": {
                "visible": true,
                "normalColor": "",
                "highlightColor": "",
                "textColor": "#656565",
                "title": "其他登录方式",
                "borderColor": "",
                "borderRadius": "0px"
              },
              "privacyTerms": {
                "defaultCheckBoxState": true,
                "uncheckedImage": "",
                "checkedImage": "",
                "checkBoxSize": 12,
                "textColor": "#BBBBBB",
                "termsColor": "#5496E3",
                "prefix": "我已阅读并同意",
                "suffix": "并使用本机号码登录",
                "privacyItems": [
                  {
                    "url": "https://",
                    "title": "用户服务协议"
                  }
                ]
              },
              "buttons": {
                "iconWidth": "45px",
                "list": [
                  {
                    "provider": "apple",
                    "iconPath": "/static/apple.png"
                  },
                  {
                    "provider": "weixin",
                    "iconPath": "/static/wechat.png"
                  }
                ]
              }
            },
            success (res) {
              this_.$axios.api.appPhoneLogin({
                openid: res.authResult.openid,
                access_token: res.authResult.access_token
              }).then(res => {
                if (res.code === 200) {
                  this_.setUserInfo(res.data)
                  this_.setToken(res.token)
                  this_.setRefreshToken(res.refreshToken)
                  uni.closeAuthView()
                  uni.navigateBack({
                    delta: 1
                  })
                } else if (res.code === 201) {
                  this_.setUserInfo(res.data)
                  this_.setToken(res.token)
                  this_.setRefreshToken(res.refreshToken)
                  this_.$emit('giveMobile', {
                    show: true,
                    mobile: res.data.mobile
                  })
                  uni.closeAuthView()
                } else if (res.code === 404) {
                  uni.showToast({
                    title: res.msg,
                    icon: none,
                    duration: 2000
                  })
                } else if (res.code === 500) {
                  uni.showToast({
                    title: res.msg,
                    icon: none,
                    duration: 2000
                  })
                }
              })
            }
          })
        }
      })
    },
    loginAccounts () {
      this.$emit('loginAccountsStatus', true)
    }
  }
}
</script>

<style lang="scss">
.wrap {
  width: 100%;
  min-height: 500rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .changeLogin {
    color: #007aff;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 24rpx;
  }
}
</style>
